<template>
  <div class='warp-container'>
    <section class='home-banner-container'>
      <!--      <home-banner :pic-list='homeBanner'></home-banner>-->
      <HomeBanner ></HomeBanner>
    </section>
    <section class='home-intro-container'>
      <Intro :pic-list='hotProductList'></Intro>
    </section>
    <section class='home-card-container'>
      <Card :server-list='serverList'></Card>
    </section>
    <section class='home-app-container'>
      <ShowApp></ShowApp>
    </section>
  </div>
</template>

<script setup lang='ts'>
import { onBeforeMount, onMounted, ref } from 'vue'
import HomeBanner from '../../components/home/Banner.vue'
import home from '../../assets/ts/home/home'
import Card from '@/components/home/Card.vue'
import Intro from '@/components/home/Intro.vue'
import ShowApp from '@/components/home/ShowApp.vue'
import Footer from '@/components/home/Footer.vue'
import { getAdvertisementList,getCustomerServiceList } from '@/api/home'
import { AdResponseData } from '@/api/home/type'


const hotProductList = ref(home.hotProductList)
const topMenu = ref(home.topMenu)
// const serverList = ref(home.serverList)
// onMounted(() => {
//   getAdList()
// })

//获取广告列表
// const homeBanner = ref<any>(home.homeBannerList)
// // const homeBanner = ref<any>([]);
// async function getAdList() {
//   let res: AdResponseData = await getAdvertisementList()
//   console.log('res',res)
//   homeBanner.value = res.rows
// }
</script>

<style scoped lang='scss'>
.warp-container {
  width: 100%;
  overflow: hidden;
}

.home-banner-container {
  background-color: white;
  width: 100%;
  height: 815px;
  overflow: hidden;

}

.home-intro-container {
  height: 725px;
  width: 100%;
  background-color: white;
  overflow: hidden;

}

.home-card-container {
  height: 716px;
  width: 100%;
  position: relative;
}

.home-app-container {
  height: 725px;
  width: 100%;
  overflow: hidden;
}

</style>
